<template>
  <el-card shadow="hover" style="flex: 1">
    <template v-slot:header>
      <div class="k-title">电瓶在柜情况</div>
    </template>
    <div class="mb-xs flex">
      在库数量：
      <el-progress
        style="flex: 1"
        :stroke-width="20"
        :percentage="info?.pct?.inStockCount ?? 0"
        color="#46C687"
        status="success"
      >
        <span class="font-bold">{{
          info?.inStockCount ?? 0
        }}</span></el-progress
      >
    </div>
    <div class="flex">
      借出数量：
      <el-progress
        style="flex: 1"
        :stroke-width="20"
        :percentage="info?.pct?.lendCount ?? 0"
        status="exception"
        color="#E05156"
      >
        <span class="font-bold">{{ info?.lendCount ?? 0 }}</span>
      </el-progress>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
/* 数据 */
const props = defineProps({
  data: {
    default: () => [] as any
  }
});

const info = computed(() => {
  let inStockCount = 0;
  let lendCount = 0;
  props.data.map((item: any) => {
    inStockCount += Number(item.batteryLendCount ?? 0);
    lendCount += Number(item.batteryInInventoryCount ?? 0);
  });
  return getPercentage({ inStockCount, lendCount });
});
/* 获取工具在柜情况百分比 */
const getPercentage = data => {
  let inStockCount = data?.inStockCount ?? 0;
  let lendCount = data?.lendCount ?? 0;

  let max = Math.max(inStockCount, lendCount);

  // 最大区间值
  let maxLen = String(max).length;
  let dm = Number(`1${"0".repeat(maxLen)}`);

  let num1 = parseFloat((inStockCount / dm) * 100);
  let num2 = parseFloat((lendCount / dm) * 100);
  const pct = {
    inStockCount: num1,
    lendCount: num2
  };
  return { ...data, pct };
};
</script>
